<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>常工电子 能耗平台系统</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Awesome Bubble Navigation with jQuery" />
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family:Arial;
                background:#fff url(images/index_bg.jpg) no-repeat top center;
            }

            a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                bottom:0px;
                left:0px;
            }
            #content{
                margin:0 auto;
            }


        </style>
</head>
<body>
<div id="content">





		  
 <div class="p_01">
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="820" height="279">
     <param name="movie" value="css/ind.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="transparent" />
     <embed src="css/ind.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="820" height="279"></embed>
   </object>
 </div>
		  
<div class="p_04">
<table width="820" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right" style="font-size:12px; color:#000; text-align:right;"><img src="images/66.jpg" alt="" width="66" height="80" style="margin-right:40px;"/></td>
  </tr>
  <tr>
    <td align="right" style="font-size:12px; color:#000; text-align:right; padding-right:18px; padding-top:8px;"><strong>Admin</strong><br />
早上好，欢迎使用<br />
能耗监测管理系统<br />
<a href="#"><img src="images/sz.gif" alt="" /></a></td>
  </tr>
</table>
</div>

  <div class="p_02">
<table width="158" height="120" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right" valign="bottom"><a href="web/main.html" style="font-size:18px; font-weight:bold; color:#FFFFFF; text-align:right;">能耗平台系统</a></td>
  </tr>
</table>
  </div>		  


  
<div class="p_03">
<table width="580" height="120" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right" valign="bottom" style="font-size:12px; color:#000; text-align:right;">Copyright© 常州新区常工电子计算机有限公司 2006 - 2011 Citk.Net All rights reserved</td>
  </tr>
</table>
</div>

		  		  
  <div class="navigation" id="nav">
    <div class="item user" id = "user">
    	 <img src="images/y_bg.png" alt="" width="199" height="199" class="circle"/> 
    	 	<a href="web_d/main.html" class="icon"></a>
      <h2>用电监管系统</h2>
      <ul>
        <li><a href="#">您有 5 条信息未理。处<br />
          6 条系统消息。</a></li>
      </ul>
    </div>
    <div class="item home"  id = "home"> <img src="images/y_bg.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>用水监管系统</h2>
      <ul>
        <li><a href="#">您有 5 条信息未理。处<br />
          6 条系统消息。</a></li>
      </ul>
    </div>
    <div class="item shop"  id = "shop"> <img src="images/y_bg.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>用气监管系统</h2>
      <ul>
        <li><a href="#">您有 5 条信息未理。处<br />
          6 条系统消息。</a></li>
      </ul>
    </div>
    <div class="item camera"  id = "camera"> <img src="images/y_bg.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>用暖监管系统</h2>
      <ul>
        <li><a href="#">您有 5 条信息未理。处<br />
          6 条系统消息。</a></li>
      </ul>
    </div>
    <div class="item fav"  id = "fav"> <img src="images/y_bg.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>预付费系统</h2>
      <ul>
        <li><a href="#">您有 5 条信息未理。处<br />
          6 条系统消息。</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="css/jquery.min.js"></script>
<script type="text/javascript" src="css/jquery.easing.1.3.js"></script>
<script type="text/javascript">
            $(function() {
            	
            	
            	      var intervalId_1;
            	      var intervalId_2;
            	      var intervalId_3;
            	      var intervalId_4;
            	      var intervalId_5;
       
       (function($,sr){
				// debouncing function from John Hann
				// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
				var debounce = function (func, threshold, execAsap) {
					var timeout;
					return function debounced () {
						var obj = this, args = arguments;
						function delayed () {
							if (!execAsap)
								func.apply(obj, args);
							timeout = null;
						};
						if (timeout)
							clearTimeout(timeout);
						else if (execAsap)
							func.apply(obj, args);
						timeout = setTimeout(delayed, threshold || 100);
					};
				}
				//smartresize
				jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
			})(jQuery,'smartresize');
        	
       	$(window).smartresize(function(){
       		
       		  window.clearInterval(intervalId_1);
       		  window.clearInterval(intervalId_2);
       		  window.clearInterval(intervalId_3);
       		  window.clearInterval(intervalId_4);
       		  window.clearInterval(intervalId_5);
			moveball_1();
			moveball_2();
			moveball_3();
			moveball_4();
			moveball_5();	 
					
				});
       
        $(window).ready(
          
          function(){
         moveball_1();
         moveball_2();
         moveball_3();
         moveball_4();
         moveball_5();
        }
          
          );
       function moveball_1(){
       	var screenwidth = $(window).width();
       	
       	       	var upordown =0;
        			  var balltop_1 =	348;
        			 
        			  var screenwidth= $(window).width();
        			  var ballleft_1 = screenwidth/2-372;
        			  
        			  
        			  $('#user').stop().animate({'top':balltop_1,'left':ballleft_1},1000);
        			 
        			    balltop_1=372;
        			  
        			    ballleft_1 = Math.random()*36+screenwidth/2-372;
        			    
        			    setTimeout(function(){
        			    	$('#user').stop().animate({'top':balltop_1,'left':ballleft_1},5000);
        			   
        			    	
        			    	
        			    	
        			    	
        			    	}, 1000); 
        			
   			  
        intervalId_1 = window.setInterval(function(){
        	
        	 if(upordown==1){
        	  			balltop_1=372;
        	  			
        	  			upordown=0;
        	  			
        	  		  ballleft_1 = Math.random()*36+screenwidth/2-372;
        	  		 
        	  			}
        	  			else{
        	  			balltop_1=348;
        	  			
        	  			upordown=1;
        	  			ballleft_1 = screenwidth/2-372+Math.random()*36;
        	  			
        	  			}
        	 
      
        			$('#user').stop().animate({'top':balltop_1,'left':ballleft_1},5000);
        
        	
        	}, 5000);  
       	
       	
       	}
           
          function moveball_2(){
       	var screenwidth = $(window).width();
       	
       	       	var upordown =0;
        			 
        			  var balltop_2=172;
        			  var screenwidth= $(window).width();
        			  
        			  var ballleft_2 = screenwidth/2-312;
        			  
        			 
        			  $('#home').stop().animate({'top':balltop_2,'left':ballleft_2},1300);
        			   setTimeout(function(){
        			    	},5000);
        			    balltop_2=148;
        			   
        			    ballleft_2 = Math.random()*36+screenwidth/2-312;
        			    setTimeout(function(){
        			    
        			    	$('#home').stop().animate({'top':balltop_2,'left':ballleft_2},5000);
        			    	
        			    	
        			    	
        			    	
        			    	}, 1300); 
        			
   			  
        intervalId_2 = window.setInterval(function(){
        	
        	 if(upordown==1){
        	  			
        	  			balltop_2=148;
        	  			upordown=0;
        	  			
        	  		  
        	  		  ballleft_2 = Math.random()*36+screenwidth/2-312;
        	  			}
        	  			else{
        	  			
        	  			balltop_2=172;
        	  			upordown=1;
        	  			
        	  			ballleft_2 = screenwidth/2-312+Math.random()*36;
        	  			}
        	 
      

              $('#home').stop().animate({'top':balltop_2,'left':ballleft_2},5000);
        	
        	}, 5000);  
       	
       	
       	}
        
        function moveball_3(){
       	var screenwidth = $(window).width();
       	
       	       	var upordown =0;
        			 
        			  var balltop_3=38;
        			  var screenwidth= $(window).width();
        			  
        			  var ballleft_3 = screenwidth/2-142;
        			  
        			 
        			  $('#shop').stop().animate({'top':balltop_3,'left':ballleft_3},1600);
        			   
        			    balltop_3=62;
        			   
        			    ballleft_3 = Math.random()*36+screenwidth/2-142;
        			    setTimeout(function(){
        			    
        			    	$('#shop').stop().animate({'top':balltop_3,'left':ballleft_3},5000);
        			    	
        			    	
        			    	
        			    	
        			    	}, 1600); 
        			
   			  
        intervalId_3 = window.setInterval(function(){
        	
        	 if(upordown==1){
        	  			
        	  			balltop_3=62;
        	  			upordown=0;
        	  			
        	  		  
        	  		  ballleft_3 = Math.random()*36+screenwidth/2-142;
        	  			}
        	  			else{
        	  			
        	  			balltop_3=38;
        	  			upordown=1;
        	  			
        	  			ballleft_3 = screenwidth/2-142+Math.random()*36;
        	  			}
        	 
      

              $('#shop').stop().animate({'top':balltop_3,'left':ballleft_3},5000);
        	
        	}, 5000);  
       	
       	
       	}  
          
         function moveball_4(){
       	var screenwidth = $(window).width();
       	
       	       	var upordown =0;
        			 
        			  var balltop_4=92;
        			  var screenwidth= $(window).width();
        			  
        			  var ballleft_4 = screenwidth/2+68;
        			  
        			 
        			  $('#camera').stop().animate({'top':balltop_4,'left':ballleft_4},1900);
        			   
        			    balltop_4=68;
        			   
        			    ballleft_4 = Math.random()*36+screenwidth/2+68;
        			    setTimeout(function(){
        			    
        			    	$('#camera').stop().animate({'top':balltop_4,'left':ballleft_4},5000);
        			    	
        			    	
        			    	
        			    	
        			    	}, 1900); 
        			
   			  
        intervalId_4 = window.setInterval(function(){
        	
        	 if(upordown==1){
        	  			
        	  			balltop_4=68;
        	  			upordown=0;
        	  			
        	  		  
        	  		  ballleft_4 = Math.random()*36+screenwidth/2+68;
        	  			}
        	  			else{
        	  			
        	  			balltop_4=92;
        	  			upordown=1;
        	  			
        	  			ballleft_4 = screenwidth/2+68+Math.random()*36;
        	  			}
        	 
      

              $('#camera').stop().animate({'top':balltop_4,'left':ballleft_4},5000);
        	
        	}, 5000);  
       	
       	
       	}    
          
          
               function moveball_5(){
       	var screenwidth = $(window).width();
       	
       	       	var upordown =0;
        			 
        			  var balltop_5=188;
        			  var screenwidth= $(window).width();
        			  
        			  var ballleft_5 = screenwidth/2+228;
        			  
        			 
        			  $('#fav').stop().animate({'top':balltop_5,'left':ballleft_5},2200);
        			   
        			    balltop_5=212;
        			   
        			    ballleft_5 = Math.random()*36+screenwidth/2+228;;
        			    setTimeout(function(){
        			    
        			    	$('#fav').stop().animate({'top':balltop_5,'left':ballleft_5},5000);
        			    	
        			    	
        			    	
        			    	
        			    	}, 2200); 
        			
   			  
        intervalId_5 = window.setInterval(function(){
        	
        	 if(upordown==1){
        	  			
        	  			balltop_5=212;
        	  			upordown=0;
        	  			
        	  		  
        	  		  ballleft_5 = Math.random()*36+screenwidth/2+228;;
        	  			}
        	  			else{
        	  			
        	  			balltop_5=188;
        	  			upordown=1;
        	  			
        	  			ballleft_5 = screenwidth/2+228;+Math.random()*36;
        	  			}
        	 
      

              $('#fav').stop().animate({'top':balltop_5,'left':ballleft_5},5000);
        	
        	}, 5000);  
       	
       	
       	} 
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
            	
            	
         
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
            	
                $('#nav > div').hover(
                function () {
                    var $this = $(this);
                    $this.find('img').stop().animate({
                        'width'     :'250px',
                        'height'    :'250px',
                        'top'       :'-55px',
                        'left'      :'-45px',
                        'opacity'   :'1.0'
                    },500,'easeOutBack',function(){
                        $(this).parent().find('ul').fadeIn(700);
                        
                    });
                    
                    if($this.attr('id')=="user"){
                     $('#user').stop()
                     window.clearInterval(intervalId_1);
                    }
                    
                    
                    if($this.attr('id')=="home"){
                     $('#home').stop()
                     window.clearInterval(intervalId_2);
                    }
                    if($this.attr('id')=="shop"){
                     $('#shop').stop()
                     window.clearInterval(intervalId_3);
                    }
                    if($this.attr('id')=="camera"){
                     $('#camera').stop()
                     window.clearInterval(intervalId_4);
                    }
                    if($this.attr('id')=="fav"){
                     $('#fav').stop()
                     window.clearInterval(intervalId_5);
                    }
                    $this.find('a:first,h2').addClass('active');
                },
                function () {
                    var $this = $(this);
                    $this.find('ul').fadeOut(500);
                    $this.find('img').stop().animate({
                        'width'     :'52px',
                        'height'    :'52px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.1'
                    },5000,'easeOutBack');
                    
                     if($this.attr('id')=="user"){
                      moveball_1();
                    }
                     if($this.attr('id')=="home"){
                      moveball_2();
                    }
                    if($this.attr('id')=="shop"){
                      moveball_3();
                    }
                    if($this.attr('id')=="camera"){
                      moveball_4();
                    }
                    if($this.attr('id')=="fav"){
                      moveball_5();
                    }
                    
                    $this.find('a:first,h2').removeClass('active');
                }
            );
            });
        </script>
</body>
</html>
